<template>
  <div style="margin-left: 20px">
    <div>----------- 单选 -----------</div>
    <el-radio v-model="radio" label="1" >备选项1</el-radio>
    <el-radio v-model="radio" label="2">备选项2</el-radio>
    <p>备选项值为label：{{radio}}</p> 
    <el-radio disabled v-model="radio2" label="禁用">备选项</el-radio>
    <el-radio disabled v-model="radio2" label="选中且禁用">备选项</el-radio>

  <div>-----------单选组 按钮样式 [el-radio-group v-model="radio1"] -----------</div>
  <div>
    <el-radio-group v-model="radio_1" @change ='changeFun' text-color='#ffffff' >
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio_2" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio_3" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled ></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio_4" disabled size="mini">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>

  <div>----------- 带有边框  -----------</div>
    
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio13" size="small">
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio14" size="mini" disabled>
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
    </el-radio-group>
  </div>



  <div style="margin-top: 20px">----------- 多选 -----------</div>

  <el-checkbox v-model="checked">备选项1</el-checkbox> 
  <el-checkbox v-model="checked1" disabled>备选项2</el-checkbox> 
  <el-checkbox v-model="checked2">备选项3</el-checkbox> 

  <div>-----------多选组 按钮样式 [ el-checkbox-group v-model="checkList"] -----------</div>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>


  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox>
  <div></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
  <div style="margin-top: 20px">----------- 选择下拉 -----------</div>
  </div>

</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
    data: () => ({
      radio: '1',
      radio2: '选中且禁用',
      radio_1:'',
      radio_2:'',
      radio_3:'',
      radio_4:'',
      radio13:'',
      radio14:'2',


      checked: true ,
      checked1: true ,
      checked2: false , 
      checkList:['选中且禁用','复选框 A'],

      //全选
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true
    }),
    methods:{
      changeFun(){
        console.log('值发生变化了:'+this.radio_1)
        alert('值发生变化了:'+this.radio_1)
      },

        handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  }
</script>

<style>
  
</style>